<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>TreeView Demo</title>
		<link href="../css/qs.css" rel="stylesheet" type="text/css" />
		<link href="../css/qs_ui.css" rel="stylesheet" type="text/css"/>
		<!--link href="../css/treeView.css" rel="stylesheet" type="text/css"/-->
		<script type="text/javascript" src="../lib/jquery.js"></script>
		<script type="text/javascript" src="../js/ui/dragdrop.js"></script>
		<script type="text/javascript" src="../js/ui/treeView.js"></script>
	</head>
	<body oncontextmenu="return false;">
		<input type="button" value="removeNode" id="remove"/>
		<!--input type="button" value="getData" id="getData"/-->
		<input type="button" value="addNode" id="addNode"/>
		<input type="button" value="rebind" id="rebind"/>
		<input type="button" value="Expand All" id="expand"/>
		<input type="button" value="Collapse All" id="collapse"/>
		<div class="treeContainer"></div>
		<script>
			var data={
				val:'root',
				txt:'Root',
				//autoExpand:false,
				children:[{
					val:'child1',
					txt:'Child1',
					
					//autoExpand:false,
					children:[
						{	
		                    val:'child11',
		                    txt:'Child11'
		                },{
                            val:'child12',
                            txt:'Child12'
                        },{
                            val:'child13',
                            txt:'Child13'
                        },{
                            val:'child14',
                            txt:'Child14',
							//showChild:false,
							children:[
		                        {
		                            val:'child41',
		                            txt:'Child41'
		                        },{
		                            val:'child42',
		                            txt:'Child42'
		                        },{
		                            val:'child43',
		                            txt:'Child43'
		                        },{
		                            val:'child44',
		                            txt:'Child44',
		                            
		                        }
		                    ]
                        }
					]
				},{
                    val:'child2',
                    txt:'Child2',
					children:[
                        {
                            val:'child21',
                            txt:'Child21'
                        }
                    ]
                },{
                    val:'child3',
                    txt:'Child3'
                }]
			};
			var i=0;
			var treeView=new Util.TreeView($('.treeContainer'),data,{
				onExpand:function(node){
					//console.log(node);
				},
                onCollapse:function(node){
					//console.log(node);
				},
				onClick:function(node){
					//console.log(node);
				},
				onContextmenu:function(e,node){
					//console.log(e,node);
				}
			},{
			});
			$('#remove').click(function(e){
				if (treeView.selectedNode) {
					treeView.removeNodeByValue(treeView.selectedNode.data.val);
				}
			});
//			$('#getData').click(function(e){
//                console.log(treeView.getTreeData());
//            });
			$('#addNode').click(function(e){
               treeView.addNode({val:'nchild'+i++,txt:'New Child',children:[{
			   	     val:'nchild'+i++,
					 txt:'New Child'
			   }]});
            });
			data.children[0].txt='Rootttt';
			$('#rebind').click(function(e){
                treeView.rebind(data);
            });
			$('#expand').click(function(e){
                treeView.expandAll(true);
            });
			$('#collapse').click(function(e){
                treeView.expandAll(false);
            });
		</script>
	</body>
</html>
